<template>
	<view class="fixtop">
		<fixtopVue>
			<template #l>
				<view class="fixtop-l">
					<view class="iconfont icon-jiantouyou" @click="back"></view>
				</view>
			</template>
			<template #c>
				<view class="fixtop-c">发布商品</view>
			</template>
		</fixtopVue>
	</view>
	<view class="" :style="{height:product}"></view>
	<view class="conbox">
		<view class="imgbox">
			<uni-section title="商品图片" type="line"></uni-section>
			<view class="r">
				<uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" :auto-upload="false" :limit="1"
					@select="select" />
			</view>
		</view>
		<view class="conitem">
			<uni-section title="商品名称" type="line"></uni-section>
			<view class="r"><input type="text" v-model="proddatashang.title" placeholder="请输入商品名称" /></view>
		</view>
		<view class="conitem">
			<uni-section title="商品价格" type="line"></uni-section>
			<view class="r"><input v-model="proddatashang.price" type="text" placeholder="请输入商品价格" /></view>
		</view>
		<view class="conitem">
			<uni-section title="商品类型" type="line"></uni-section>
			<view class="r">
				<uni-data-select v-model="proddatashang.lx" :localdata="range"></uni-data-select>
			</view>
		</view>
		<view class="conitem">
			<uni-section title="商品口味" type="line"></uni-section>
			<view class="r">
				<button plain style="width: 120rpx;height: 70rpx;font-size: 25rpx;margin-bottom: 20rpx;margin-left: 0;"
					@click="addkw">添加</button>
				<view class="" style="display: flex;align-items: center;gap: 20rpx;margin-top: 10rpx;"
					v-for="i in proddatashang.kw" :key="i.id">
					<input type="text" placeholder="请输入商品名称" v-model="i.v" />
					<view class="" @click="dekw(i.id)">x</view>
				</view>
			</view>
		</view>
		<view class="btnn" @click="fsbuprod">发布商品</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getstatusheight,
		gettitleheight
	} from '@/utils/getsysteminfo.js'
	import {
		getgetlxinfos,
		fabuproducts
	} from '@/api/index.js'
	import fixtopVue from '../../components/fixtop/fixtop.vue';
	import userstore from '@/store/userinfo.js'
	const product = getstatusheight() + gettitleheight() + 'px'
	const range = ref([])
	const imageValue = ref()
	const useuserstore = userstore()
	const back = () => {
		uni.navigateBack()
	}
	const proddatashang = ref({
		img: '',
		title: '',
		price: '',
		lx: "",
		kw: [],
		shoperid: ""
	})
	onLoad(e => {
		getlxdata()
		proddatashang.value.shoperid=useuserstore.shoperinfo.id
	})
	const addkw = () => {
		proddatashang.value.kw.unshift({
			id: Math.floor(Math.random() * 999999) + Math.floor(Math.random() * 999999),
			v: ''
		})
	}
	const dekw = id => {
		proddatashang.value.kw = proddatashang.value.kw.filter(e => e.id !== id)
	}
	const getlxdata = async () => {
		const rudata = await getgetlxinfos()
		if (rudata.code == 200) {
			range.value = rudata.data.map(e => {
				return {
					value: e.lx,
					text: e.title
				}
			})
		}
	}
	const select = e => {
		proddatashang.value.img = e.tempFilePaths[0]
		console.log(proddatashang.value)
	}
	const fsbuprod=async()=>{
		const senddata={
			...proddatashang.value,
			kw:proddatashang.value.kw.map(e=>e.v)
		}
		console.log(senddata)
		const rudata=await fabuproducts(senddata)
		if(rudata.code==200){
			uni.showToast({
				title:"发布成功~",
				icon:"none"
			})
			setTimeout(()=>{
				uni.navigateBack()
			},1000)
		}
	}
</script>

<style lang="scss" scoped>
	.btnn {
		height: 80rpx;
		width: 90%;
		margin: 100rpx auto;
		background-color: orange;
		border-radius: 15rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-weight: 700;
		color: #fff;
	}

	.conbox {
		height: calc(100vh - v-bind(product));
		padding: 20rpx;

		.jia {
			font-size: 60rpx;
		}

		input {
			height: 70rpx;
			width: 92%;
			background-color: #eee;
			border-radius: 15rpx;
			font-size: 25rpx;
			margin: 0 auto;
			padding-left: 25rpx;
		}

		// background-color: #eee;
	}

	.fixtop {
		width: 100vw;
		position: fixed;
		left: 0;
		top: 0;
		background-color: orange;
		z-index: 999;

		.fixtop-l,
		.fixtop-c {
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
		}

		.fixtop-l {
			padding-left: 25rpx;

			.iconfont {
				font-size: 25rpx;
				transform: rotate(180deg);
			}
		}

		.fixtop-c {
			justify-content: center;
			font-size: 30rpx;
		}
	}
</style>